<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:05:02
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-06 22:49:15
-->
<template>
  <div class="article">
    <!-- 头部 -->
    <Head id="top"></Head>
    <!-- /头部 -->

    <!-- 体部 -->
    <div class="content" style="min-height:800px" v-loading="loading">
      <div class="wrapper">
        <div class="title1">
          <div class="title_img"><img src="../assets/list_img.png" alt=""></div>
           <div class="page_title">{{category.name}}</div>

  <el-breadcrumb class="mypath" separator-class="el-icon-arrow-right">
   <el-breadcrumb-item>当前位置：</el-breadcrumb-item>
   <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item :to="{path:'/List'}">{{category.name}}</el-breadcrumb-item>
   <el-breadcrumb-item>正文</el-breadcrumb-item>
 </el-breadcrumb>
      </div>

        <!-- 正文 -->
        <div class="article_content" v-if="article">
          <div class="title">{{article.title}}</div>
          <div class="info">
            分类：{{article.category?article.category.name:'无'}}
            作者：{{article.baseUser?article.baseUser.realname:'匿名'}}
            发布时间：{{article.publishTime | fmtDate}}
            <i class="el-icon-s-opportunity"></i>阅读次数：{{article.readTimes}}
          </div>
          <div class="cc" v-html="article.content"> </div>
        </div>
      </div>

      <!-- 返回顶部按钮 -->
      <div class="back">
        <a href="#top">
          <img src="../../img/img-back.png" height="50px" width="50px"> 
        </a>
        </div>

      <!-- 评论区 -->
       <div style="margin: 20px 0;"></div>
       <div class="commit">
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="textarea"
        maxlength="30"
        show-word-limit>
      </el-input>
      <el-row>
       <el-button type="primary" round>取消</el-button>
       <el-button type="danger" round>发表</el-button>
      </el-row>
       </div>
    </div>
    <!-- /体部 -->

    <!-- 底部 -->
    <Footer></Footer>
    <!-- /底部 -->
  </div>
</template>

<script>
import Head from './components/Head'
import Footer from './components/Footer'
import { get } from '../utils/request'
export default {
  components:{
    Head,Footer
  },
  data(){
    return {
      id:0,
      article:null,
      loading:false,
      category:{},
      categories:[],
       textarea: ''
    }
  },
  created(){
    this.id = this.$route.query.id;
    this.loadArticle();
    // 获取参数
    this.category = this.$route.query;    
  },

  watch:{
    '$route.query':{
      handler(query){
        this.category = query;
        this.loadArticles();
      },
      deep:true
    }
  },
  
  methods:{
    loadArticle(){
      this.loading = true;
      let url = '/index/article/findById'
      get(url,{id:this.id}).then(resp => {
        this.article = resp.data;
        this.loading = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 变量
$color_primary:rgb(17, 10, 10);
.article {
  overflow-x: hidden;
  .content {
    background-color:rgb(239, 239, 239);
    padding: 1em 0;
    .title1{
      height: 80px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      padding-left:1em;
      vertical-align: center;
      border-bottom: 1px solid #444444;
      
    .page_title {
      padding:.5em 0;
      font-size: 20px;
      margin-left: 20px;
      font-weight: bold;
      color: $color_primary;
      line-height: 65px;
  }
  .mypath{
    line-height: 8em;
    position: absolute;
    right: 100px;
  }
  }
    
    .article_content {
      background-color: #ffffff;
      min-height: 400px;
      border-radius: 5px;
      .title,.info {
        text-align: center;
      }
      .title {
        font-size:25px;
        font-weight:bold;
        color: $color_primary;
        line-height: 4em;
      }
      .info {
        padding:0 0 1em;
        width: 80%;
        margin: 0 auto;
        border-bottom: 1px solid #ededed;
        margin-bottom: .5em;
      }
      .cc {
        padding: 0 1em;
      }
    }
  }
  
  .el-inut{
    width: 100px;
  }
  .el-row{
    float: right;
    margin-top: 20px;
    margin-right: 30px;
  }
  .back{
  position: fixed;
  right: 0;
  bottom: 50px;
}
.commit{
  margin: 0 auto;
  width: 85%;
  height: 150px;
}
}
</style>